<template>
  <div class="app-container">
    <div>
      <el-form class="my-form" ref="obj" :model="obj" :rules="rules" label-position="right" label-width="auto">
        <el-form-item prop="budgetTwoCollectType" label="汇总数据类型">
          <el-radio-group v-model="obj.budgetTwoCollectType">
            <el-radio-button v-for="(item,index) in getEnumList('BudgetCollectType')" :label="item.key" :key="index">{{item.value}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="budgetTwoCollectCode" label="汇总数据编码">
          <el-input v-model="obj.budgetTwoCollectCode" placeholder="自动生成" style="width: 500px;" disabled />
        </el-form-item>
        <el-form-item prop="budgetTwoCollectName" label="汇总数据名称">
          <el-input v-model="obj.budgetTwoCollectName" placeholder="汇总数据名称" style="width: 500px;" />
        </el-form-item>
        <el-form-item prop="" label="一级项目" v-if="obj.budgetTwoCollectType === '2'">
          <el-input v-model="obj.projectOneDesc"
                    placeholder="请选择一级项目"
                    style="width: 500px;"
                    suffix-icon="Search"
                    @focus="openVisibleProjectOneList('obj')" />
        </el-form-item>
        <el-form-item prop="" label="汇总部门" v-if="obj.budgetTwoCollectType === '3'">
          <el-input v-model="obj.organizationDesc"
                    placeholder="请选择汇总部门"
                    style="width: 500px;"
                    suffix-icon="Search"
                    @focus="openVisibleOrganizationList('obj')" />
        </el-form-item>
        <el-form-item prop="" label="申报单位" v-if="obj.budgetTwoCollectType === '4'">
          <el-input v-model="obj.governmentDesc"
                    placeholder="请选择申报单位"
                    style="width: 500px;"
                    suffix-icon="Search"
                    @focus="openVisibleGovernmentList('obj')" />
        </el-form-item>
        <el-form-item prop="" label="用款单位" v-if="obj.budgetTwoCollectType === '5'">
          <el-input v-model="obj.governmentDesc"
                    placeholder="请选择用款单位"
                    style="width: 500px;"
                    suffix-icon="Search"
                    @focus="openVisibleGovernmentList('obj')" />
        </el-form-item>
      </el-form>
      <div class="query-per">
        <el-button type="primary"
                   icon="Search"
                   @click="openVisibleBudgetTwoMultiple('obj')"
                   v-if="obj.budgetTwoCollectType === '0' || obj.budgetTwoCollectType === '1'">选择二上预算编制</el-button>
      </div>
      <el-divider />
      <el-table :data="budgetTwoList" border show-summary style="width: 100%;margin-top: 60px;">
        <el-table-column align="center" type="index" label="序号" width="60px" />
        <el-table-column align="center" label="项目编号" prop="budgetName" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.code }}</template>
        </el-table-column>
        <el-table-column align="center" label="项目名称" prop="budgetName" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="申请财务金额" prop="totalFund" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.totalFund }}</template>
        </el-table-column>
        <el-table-column align="center" label="社会投入资金" prop="putinFund" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.putinFund }}</template>
        </el-table-column>
        <el-table-column align="center" label="当年资金" prop="currFund" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.currFund }}</template>
        </el-table-column>
        <el-table-column align="center" label="预算金额(明细合计)" prop="totalAmount" min-width="105px" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.totalAmount }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160px" fixed="right">
          <template v-slot="{row}">
            <el-button type="success" link @click="handleView(row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="" style="display: flex;align-items: center;justify-content: center;margin-top: 30px;">
        <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="doConfirm('obj')">保存</el-button>
      </div>
    </div>
    <div>
      <selectBudgetTwoListMultiple v-model:itemsVisible="itemsVisibleBudgetTwoMultiple"
                                   v-model:state="itemBudgetTwoState"
                                   @close="itemsVisibleBudgetTwoMultiple = false"
                                   @budgetTwoSelect="changeBudgetTwoMultiple" />
      <selectProjectOneList v-model:itemsVisible="itemsVisibleProjectOneList"
                            @close="itemsVisibleProjectOneList = false"
                            @projectOneSelect="changeProjectOne" />
      <selectGovernmentList v-model:itemsVisible="itemsVisibleGovernmentList"
                            v-model:state="stateEnable"
                            @close="itemsVisibleGovernmentList = false"
                            @governmentSelect="changeGovernment" />
      <selectOrganizationList v-model:itemsVisible="itemsVisibleOrganizationList"
                              v-model:state="stateEnable"
                              @close="itemsVisibleOrganizationList = false"
                              @organizationSelect="changeOrganization" />
    </div>
    <el-dialog v-model="dialogViewVisible" title="详情" width="80%" top="2vh">
      <budgetTwoDetail v-model:budgetTwoId="dialogViewVisibleId"></budgetTwoDetail>
      <div style="text-align:right;margin: 1.875rem 0;">
        <el-button type="danger" @click="dialogViewVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost} from '@/config/http'
import {alertErrorMsg, customValidator, notifySuccess} from "@/config/common"
import selectBudgetTwoListMultiple from '@/views/components/budget/selectBudgetTwoListMultiple.vue'
import selectProjectOneList from '@/views/components/budget/selectProjectOneList.vue'
import selectGovernmentList from '@/views/components/base/selectGovernmentList.vue'
import selectOrganizationList from '@/views/components/base/selectOrganizationList.vue'
import budgetTwoDetail from '@/views/components/budget/budgetTwoDetail.vue'

const props = { multiple: true }
const emptyObj = {
  budgetTwoCollectType: null,
  budgetTwoCollectCode: null,
  budgetTwoCollectName: null,
  projectOneId: null,
  organizationId: null,
  governmentId: null,

  projectOneDesc: null,
  organizationDesc: null,
  governmentDesc: null,
}

export default {
  name: 'budgetTwoCollectEdit2_nocache',
  mixins: [baseConfig],
  components: {
    budgetTwoDetail,
    selectBudgetTwoListMultiple,
    selectProjectOneList,
    selectGovernmentList,
    selectOrganizationList,
  },
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      dialogType: 'add',
      dialogTypeTitle: '汇总明细',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      budgetTwoList: [],
      total: 0,
      listLoading: false,
      fullscreenLoading: false,
      summaryData: [],
      listQuery: {},
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      itemsVisibleBudgetTwoMultiple: false,
      itemBudgetTwoState: null,
      itemsVisibleOrganizationList: false,
      itemsVisibleProjectOneList: false,
      itemsVisibleGovernmentList: false,
      rules: {
        budgetTwoCollectType: [{ required: true, validator: customValidator, min: 0, max: 20, label: '汇总数据类型', trigger: ['blur', 'change'] }],
        budgetTwoCollectCode: [{ required: false, validator: customValidator, min: 0, max: 100, label: '汇总数据编码', trigger: ['blur', 'change'] }],
        budgetTwoCollectName: [{ required: true, validator: customValidator, min: 0, max: 200, label: '汇总数据名称', trigger: ['blur', 'change'] }],
      },
      dialogViewVisible: false,
      dialogViewVisibleId: null,
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
  },
  created() {
    this.initObj()
  },
  methods: {
    async initObj() {
      if (this.$route['query'].id) {
        let id = this.$route['query'].id
        this.obj = await doGet(this.svc, '/budget-two-collect/' + id, {}, true);
        switch (this.obj.budgetTwoCollectType) {
          case "0":
          case "1": {
            let res = await doGet(this.svc, '/budget-two-collect-relation/listByField', {field: 'budgetTwoCollectId', values: id}, false)
            let ids = []
            res.map(item => ids.push(item.budgetTwoId))
            if (ids.length > 0) {
              this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByIds/' + ids.join(','), {}, true)
            }
            break
          }
          case "2": {
            this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByProjectOneId/' + data.id, {}, true)
            break
          }
          case "3": {
            this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByOrganizationId/' + data.id, {}, true)
            break
          }
          case "4": {
            this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByApplyGovernmentId/' + data.id, {}, true)
            break
          }
          case "5": {
            this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByUseGovernmentId/' + data.id, {}, true)
            break
          }
        }
      }
    },
    handleView(row) {
      this.dialogViewVisible = true
      this.dialogViewVisibleId = row.id
    },
    async doConfirm(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      if (this.budgetTwoList.length === 0) {
        alertErrorMsg('请选择二上预算编制')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // console.debug('this.fullscreenLoading',this.fullscreenLoading)
      let o = this.obj
      o.items = []
      this.budgetTwoList.map(item => {
        let i = {
          budgetTwoId: item.id
        }
        o.items.push(i)
      })
      doPost(this.svc, '/customBudgetTwo/saveBudgetTwoCollect', o).then(_ => {
        notifySuccess('操作成功')
        this.goTargetByName('budgetTwoCollect', {}, true)
      })
    },
    openVisibleBudgetTwoMultiple(formName) {
      console.debug(formName)
      if (this.obj.budgetTwoCollectType === null) {
        alertErrorMsg('请选择汇总数据类型')
        return
      }
      this.itemsVisibleBudgetTwoMultiple = true
      if (this.obj.budgetTwoCollectType === '0') {
        this.itemBudgetTwoState = '2'
      } else {
        this.itemBudgetTwoState = null
      }
    },
    openVisibleProjectOneList(formName) {
      console.debug(formName)
      if (this.obj.budgetTwoCollectType === null) {
        alertErrorMsg('请选择汇总数据类型')
        return
      }
      this.itemsVisibleProjectOneList = true
    },
    openVisibleOrganizationList(formName) {
      console.debug(formName)
      if (this.obj.budgetTwoCollectType === null) {
        alertErrorMsg('请选择汇总数据类型')
        return
      }
      this.itemsVisibleOrganizationList = true
    },
    openVisibleGovernmentList(formName) {
      console.debug(formName)
      if (this.obj.budgetTwoCollectType === null) {
        alertErrorMsg('请选择汇总数据类型')
        return
      }
      this.itemsVisibleGovernmentList = true
    },
    async changeBudgetTwoMultiple(data) {
      let ids = []
      data.map(item => {
        ids.push(item.id)
      });
      this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByIds/' + ids.join(','), {}, true)
    },
    async changeProjectOne(data) {
      if (data.id) {
        this.obj.projectOneId = data.id
        this.obj.projectOneDesc = data.code + " - " + data.name
        this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByProjectOneId/' + data.id, {}, true)
      }
    },
    async changeOrganization(data) {
      if (data.id) {
        this.obj.organizationId = data.id
        this.obj.organizationDesc = data.organizationCode + " - " + data.organizationName
        this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByOrganizationId/' + data.id, {}, true)
      }
    },
    async changeGovernment(data) {
      if (data.id) {
        this.obj.governmentId = data.id
        this.obj.governmentDesc = data.governmentCode + " - " + data.governmentName
        if (this.obj.budgetTwoCollectType === '4') {
          this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByApplyGovernmentId/' + data.id, {}, true)
        }
        if (this.obj.budgetTwoCollectType === '5') {
          this.budgetTwoList = await doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByUseGovernmentId/' + data.id, {}, true)
        }
      }
    },
  }
}
</script>
<style>
.textarea-1 .el-textarea__inner{
  /* pointer-events: none; */
  border: none !important;
  resize: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
.form-table-textarea .el-form-item__content{
  /* width: 100%; */
  padding:0;
  margin-left: 0 !important;
}
</style>
<style scoped>
.table-form {
  border-collapse: collapse;
  text-align:center;
}
.el-popper {
  overflow: hidden;
}
.form-list-content-1 .el-form-item__label {
  width: 11.25rem !important;
}
.table-form .form-table-textarea {
  margin-bottom:  0 !important;
}
.textarea-1 .el-textarea__inner{
  /* pointer-events: none; */
  border: none !important;
  resize: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
.btns {
  margin: 1.875rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-show-per {
  display: flex;
  align-items: center;
}
.project-show {
  margin-left: 20px;
}
.project-show-title {
  color: #337ecc;
  padding-left: 10px;
}
.indexs {
  display: flex;
  flex-wrap: wrap;
}
.index-list {
  margin: 0 20px
}
.index-list h3 {
  font-weight: bold;
  /* text-align: center; */
}
.content-per {

}
.index-list-content {
  display: flex;
  align-items: center;
}
.content-text {
  width: 300px;
  /* background: red; */
}
.index-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.query-per {
  display: flex;
  align-items: center;
}
.query-per .el-button {
  margin-left: 20px;
}
</style>
